<template>
    <div class="myConrtainer">
        <div class="nav-header">
            <span class="iconfont icon-shezhi" @click="settingHandler"></span>
        </div>
        <div class="header-icon-box clearfix">
            <div class="myIcon"><img v-if ="dataInfo[0]" :src="dataInfo[0].mineIcon" alt=""></div>
            <div class="myInfo">
                <p v-if="dataInfo.length>0" class="myTitle">{{dataInfo[0].nickName}}</p>
                <p v-if="dataInfo[0]" class="myDesc">{{dataInfo[0].mineDesc}}</p>
            </div>
            <div class="right-errow"> 
                 <router-link :to="{name:'personal',params:{id:mineInfo.mineId}}" > &gt </router-link>
            </div>    
        </div>
        <p class="msgNotice" >{{mixText.noticeText}}</p>
        <div class="myCenterBox">
             <p class="myCenter" v-for="(item,index) in mixText.centerText">{{item}}</p>
        </div>
        <div>
         <p class="myHistory" v-for="(item,index) in mixText.historyText">{{item}}  </p>         
        </div>
    </div>
</template>
<script>

export default {
    
    name:"mineView",
    data(){
        return{
            dataInfo:[],
            nickName:"",
            mineInfo:{},
            mixText:{
                noticeText:"消息通知",
                centerText:["数据中心","我的目标","步数记录","打卡记录"],
                historyText:["健身历史","运动路线","收藏"]
            }

        }
    },
    methods:{
        settingHandler(){
             this.$router.push("/setting")

        }
    },
   
    mounted(){
        //mine 页面网络请求
        this.$api.mine.minePageInfo({
            //通过getters拿到vueX里面的token值；
           tel:this.$store.getters.getToken
        })
        .then(res => {  
            this.dataInfo = res.data
      
        })
        .catch(error => {
            console.log(error)
        })
    }
}
</script>

<style lang="less" scoped>
.myConrtainer{
    overflow:hidden;
    .nav-header {
        height: 2rem;
        background-color: black;
        overflow: hidden;

        .iconfont{
            color:#fff;
            font-size:1rem;
            line-height:2rem;
            display: block;
            float:right;
            margin-right:15px;
        
        }
    
    }  
    .header-icon-box{
            height: 6.35rem;
            background-color: #FED906;
            padding:1.3rem 0.8rem;
            box-sizing: border-box;
            display: flex;
           
            .myIcon{
                display: inline-block;
                width:3.75rem;
                height:3.75rem;
                line-height:3.75rem;
            }
            .myInfo{
                margin-left:14px;
                box-sizing: border-box;
                display: inline-block;
                box-sizing: border-box;
                // width:100rem;
                    font-weight:800;
                    margin-bottom:13px;
                    font-size:0.9rem;
                .myDesc{
                    font-size:0.9rem;
                    box-sizing:border-box;
                }
            }
            .right-errow{
                // width:20px;
                font-weight:800;
                line-height:3rem;
                color:gray;
                float:right;
                box-sizing:border-box;
                font-size:30px;
                float:right;
                margin-left:15px;
            }
        }
    

    .msgNotice,.myCenter,.myHistory{
        width:100%;
        height:2.6rem;
        line-height:2.6rem;
        background-color:#fff;
        padding:0 10px;
        font-size:18/20rem;
        color:#171818;
      

    }
    .myCenterBox{
        margin-bottom:10px;
    }
    .msgNotice{
        margin-bottom:10px;

    }
    .myCenter,.myHistory{
        margin-bottom:3px;
    }
    





}


    
</style>
